<template>
  <music-box class="music-box"
             titleStyle="color: #ffffff;"
             title="歌单">
    <!-- 背景图片 -->
    <view class="bg-img"
          slot="bg">
    </view>

    <!-- 列表头部简介区域 -->
    <view class="list-head"
          v-if="playInfo">
      <!-- 图片区域 -->
      <view class="img-box">
        <image :src="playInfo.coverImgUrl"
               mode="scaleToFill">
        </image>
        <view v-if="playInfo.playCount"
              class="play-count iconfont iconyousanjiao">
          {{formatCount(playInfo.playCount)}}
        </view>
      </view>

      <!-- 列表简介区域 -->
      <view class="list-info">
        <view>{{playInfo.name}}</view>
        <view v-if="playInfo.creator">
          <image :src="playInfo.creator.avatarUrl"></image>
          {{playInfo.creator.nickname}}
        </view>
        <view>{{playInfo.description}}</view>
      </view>
    </view>

    <!-- 微信分享 -->
    <!-- #ifdef MP-WEIXIN -->
    <button class="share-box"
            v-if="playInfo"
            open-type="share">
      <text class="iconfont iconicon-"></text>
      分享给微信好友
    </button>
    <!-- #endif -->

    <!-- 音乐列表区域 -->
    <view class="list-box"
          v-if="playInfo">
      <!-- 播放全部功能 -->
      <view class="play-all"
            @click="playAllClick">
        <text class="iconfont iconbofang1"></text>
        <view>
          播放全部
          <view class="sub-title">(共{{playInfo.trackCount}}首)</view>
        </view>
      </view>

      <!-- 歌曲列表主体 -->
      <view class="item-box">
        <view class="list-item"
              v-for="(item, index) in musicList"
              :key="item.id"
              @click="toDetail(item.id)">
          <view class="index">{{index + 1}}</view>
          <view class="center-box">
            <out-hidden-view class="name">{{item.name}}</out-hidden-view>
            <view class="type">
              <image v-if="item.musicQuality.flag > 60 && item.musicQuality.flag < 70"
                     src="/static/img/dujia.png">
              </image>
              <image v-if="item.musicQuality.maxbr == 999000"
                     src="/static/img/sq.png">
              </image>
              {{(item.ar || []).map(i => i.name).join('、')}}
              -
              {{item.name}}
            </view>
          </view>
          <text class="play iconfont iconbofang"></text>
        </view>
      </view>
    </view>
  </music-box>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    data() {
      return {
        id: '',
        // 歌单/排行榜简介
        playInfo: null,
        // 歌曲列表
        musicList: [],
      };
    },
    onLoad(query) {
      this.id = query.id || ''
    },
    mounted() {
      this.getMusicList()
    },
    methods: {
      ...mapMutations('music-list', ['addMusicList', 'setActiveListId']),

      // 获取排行榜列表
      async getMusicList() {
        let res = await this.api.getMusicListById(this.id)
        if (res.code !== 200)
          return uni.$showError('获取榜单失败')
        this.playInfo = res.playlist || {}
        this.musicList = (this.playInfo.tracks || []).map((item, index) => {
          if (res.privileges)
            item.musicQuality = res.privileges[index]
          else
            item.musicQuality = []
          return item
        })
      },

      // 播放数格式化
      formatCount(num) {
        if (!num) return
        if (num < 100) {
          return num
        } else if (num <= 100000000) {
          return parseInt(num / 10000 + '') + '万'
        } else {
          return parseInt(num / 100000000 + '') + '亿'
        }
      },

      /**
       * 跳转到歌曲详情页
       * @param {String | Number} id 歌曲id
       */
      toDetail(id) {
        // 添加歌单
        this.addMusicList({
          id: this.id,
          name: this.playInfo && this.playInfo.name || '',
          music: this.musicList || []
        })
        
        // 设置当前正在播放的歌单id
        this.setActiveListId(this.id)
        
        uni.navigateTo({
          url: `/pages/pageDetail/pageDetail?id=${id}`
        })
      },

      // 点击播放全部
      playAllClick() {
        // 跳转到第一首歌
        if (!(this.musicList && this.musicList.length))
          return uni.$showError('当前列表为空')
        this.toDetail(this.musicList[0].id)
      }
    }
  }
</script>

<style scoped
       lang="scss">
  .music-box {
    position: relative;

    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #4b79bc;
      transform: scaleX(1.2);
      filter: blur(30px);
    }

    .list-head {
      display: flex;
      padding: 30rpx;
      color: #FFFFFF;

      .img-box {
        position: relative;
        margin-right: 40rpx;

        image {
          width: 260rpx;
          height: 260rpx;
          border-radius: 15rpx;
        }

        .play-count {
          position: absolute;
          font-size: 28rpx;
          top: 8rpx;
          right: 16rpx;
        }
      }

      .list-info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 32rpx;
        color: #f0f2f7;

        view:nth-of-type(1) {
          font-size: 34rpx;
          color: #FFFFFF;
        }

        view:nth-of-type(2) {
          display: flex;
          align-items: center;
          font-size: 24rpx;

          image {
            width: 52rpx;
            height: 52rpx;
            border-radius: 50%;
            margin-right: 14rpx;
          }
        }

        view:nth-of-type(3) {
          font-size: 24rpx;
          line-height: 32rpx;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }

    .share-box {
      width: 330rpx;
      height: 74rpx;
      margin-bottom: 30rpx;
      border-radius: 37rpx;
      background-color: #007AFF;
      color: #FFFFFF;
      font-size: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .iconfont {
        margin-right: 16rpx;
        transform: translateY(2rpx);
      }
    }

    .list-box {
      background-color: #FFFFFF;
      border-radius: 50rpx 50rpx 0 0;
      padding-top: 30rpx;
      box-sizing: border-box;
      min-height: calc(100% - 320rpx);

      .play-all {
        margin-left: 30rpx;
        width: 340rpx;
        display: flex;
        align-items: center;

        text:nth-of-type(1) {
          font-size: 50rpx;
        }

        &>view {
          font-size: 34rpx;
          margin-left: 20rpx;
          display: flex;
          align-items: flex-end;

          .sub-title {
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #b2b2b2;
          }
        }
      }

      .item-box {
        padding: 66rpx 22rpx 0 24rpx;
        overflow: auto;

        .list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 66rpx;

          .index {
            color: #959595;
            width: 40rpx;
            text-align: right;
          }

          .center-box {
            flex: 1;
            margin-left: 40rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .name {
              font-size: 28rpx;
              width: 400rpx;
            }

            .type {
              padding-top: 4rpx;
              line-height: 32rpx;
              display: flex;
              color: #b2b2b2;
              word-wrap: break-word;

              image {
                width: 34rpx;
                height: 32rpx;
                padding: 6rpx 0;
                box-sizing: border-box;
                margin-right: 8rpx;
              }

              font-size: 22rpx;
            }
          }

          .play {
            color: #c7c7c7;
            font-size: 56rpx;
          }
        }
      }
    }
  }
</style>
